<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="css/ElementUI.css"/> -->


		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
		<link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css" />
		<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
		<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.js" type="text/javascript"
			charset="utf-8"></script> -->
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/EmelentUI.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				height: 100%;
				padding: 0;
				margin: 0;

			}

			body {
				background-color: #f4f4f4;
			}

			#adminHeader {
				position: fixed;
				width: 100%;
				height: 55px;
			}

			#expart {
				width: 100%;
				margin: 0 auto;
				max-height: calc(100% - 55px);
				padding-top: 55px;
			}

			.el-container {
				height: 100%;
			}

			/* 	.el-header,
			.el-footer {
				background-color: #B3C0D1;
				color: #333;
				text-align: center;
				line-height: 60px;
			}

			.el-aside {
				background-color: #D3DCE6;
				color: #333;
				text-align: center;
				line-height: 200px;
				height: 100%;
			}

			.el-main {
				background-color: #E9EEF3;
				color: #333;
				text-align: center;
				line-height: 160px;
			}

			body>.el-container {
				margin-bottom: 40px;
			}

			.el-container:nth-child(5) .el-aside,
			.el-container:nth-child(6) .el-aside {
				line-height: 260px;
			}

			.el-container:nth-child(7) .el-aside {
				line-height: 320px;
			} */
			.attahcmentsList {
				display: flex;
				margin: 5px 0;
				background-color: #eee;
			}

			.attahcmentsList>* {
				display: inline-flex;
				align-items: center;
			}

			.attahcmentsList i {
				font-size: 32px;
				color: red;

			}

			aside {


				padding: 20px 0;
				width: 300px;
			}

			.projectList {
				background-color: white;
				font-size: 20px;
				font-family: 宋体;
				padding: 1px 0 20px 0;
				height: calc(100% - 22px)
			}

			.projectList>p {
				padding-left: 15px;
			}

			.bc {
				height: 100%
			}

			.ac {
				max-height: calc(100% - 90px);

			}

			.icolor {
				color: cadetblue;
				margin-right: .2em;
			}

			#expart .el-tree-node__content:hover {
				background-color: #f4f4f5;

			}

			#expart .el-tree-node.is-current>.el-tree-node__content {
				background: #ecf5ff;
				border-right: 1px solid #63BA79;
				color: black;

			}

			#expart .el-tree-node__content {
				margin: 3px 0;

			}

			#expart .el-card__body {
				padding: 0;

			}

			.grid-content {
				border-radius: 4px;
				min-height: 36px;
			}

			.row-bg {
				padding: 10px 0;
				background-color: red;
			}

			.rightTag {
				height: 100%;

			}

			.rightTag>div>* {
				display: flex;
				width: 200px;
				margin-bottom: 2px;
			}

			.header {
				height: 55px !important;
				border-bottom: 1px solid #ddd;
				position: relative;
				color: #e3e4e8;
				/* color: #f0efef; */
				background-color: #303643 !important;
			}

			.topnav {
				float: right;
				/* margin-right: calc(50% - 30em); */


			}

			.topnav>* {

				margin-left: 2em;


			}

			.topnav .el-divider__text,
			.el-link {
				font-size: 16px;

			}

			.topnav .el-link.el-link--default {
				color: #999;

			}

			.clist {
				position: relative;
				display: flex;
				margin-top: 15px;
				margin-bottom: 0;
				width: 50%;
				flex-wrap: wrap;
			}

			.clist>* {
				margin: 5px;
				border: 1px solid #dcdfe6;
			}

			.title5 {
				position: absolute;
				width: 100%;
				text-align: center;
				bottom: 0;
				font-size: 18px;
				padding: 5px;
			}

			#expart .el-tree-node {
				white-space: normal;

			}

			#expart .el-tree-node .el-tree-node__content {
				height: 100%;
				align-items: start;
				padding: 3px;
			}

			.title1 {
				font-size: 24px;
				position: absolute;
				display: flex;
				width: 100%;
				align-items: center;
				padding-left: 30px;
				margin: 0;
			}

			.title1 img {
				margin-right: 10px;

			}

			.topnav .el-divider__text,
			.el-link {
				font-size: 24px;
			}

			.topnav .el-link.el-link--default {
				color: #999;

			}

			.topnav {
				margin-top: 10px;

			}
		</style>
	</head>
	<body>
		<div id="adminHeader">
			<el-header class="header">
				<div class="topnav">
					<!-- <el-dropdown>
						<el-button>
							更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>黄金糕</el-dropdown-item>
							<el-dropdown-item>狮子头</el-dropdown-item>
							<el-dropdown-item>螺蛳粉</el-dropdown-item>
							<el-dropdown-item>双皮奶</el-dropdown-item>
							<el-dropdown-item>蚵仔煎</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown> -->
					<el-link icon="el-icon-user">{{userInfor.name}}</el-link>
					<el-link icon = "el-icon-switch-button">{{exit.name}}</el-link>
				</div>
				<h1 class="title1"><img src="./img/logo.fw.png">电子评标系统(管理员)</h1>


				<div class="title5">本项目本标段投标最高限价为: <span style="color:indianred">{{maxrmb}}</span>万元</div>
			</el-header>

		</div>
		<div id="expart">
			<el-container class="bc">

				<el-container class="ac">
					<el-aside width="300px">
						<div class="projectList">
							<p>项目列表</p>
							<el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
								<span class="custom-tree-node" slot-scope="{ node, data }">
									<i class="el-icon-s-flag icolor"></i><span>{{ node.label }}</span>
									<span>
										<el-switch @change="treeSwitch(node,data)" v-model="data.switch1"
											inactive-color="#cecece" active-color="#13ce66">
										</el-switch>
									</span>
								</span>
							</el-tree>
						</div>




					</el-aside>
					<el-main>
						<el-table :data="tableData" style="width: 100%">
							<el-table-column prop="companyName" label="投标单位名称" width="180">
							</el-table-column>
							<el-table-column prop="date" label="标书递交时间" width="180">
							</el-table-column>
							<el-table-column prop="tenderOffer" label="投标报价(万元)">
							</el-table-column>
							<el-table-column prop="PM" label="项目负责人">
							</el-table-column>
							<el-table-column prop="bs" label="上传标书">
							</el-table-column>
						</el-table>
					</el-main>
				</el-container>
				<!-- <el-footer>Footer</el-footer> -->
			</el-container>
		</div>
	</body>
	<script type="text/javascript">
		const vm1 = new Vue({
			el: "#adminHeader",
			data() {
				return {
					userInfor:{
						name:"袁汉龙"
					},
					maxrmb: 2000,
					exit: {
						name: "退出",
						url: "#"

					},
				}

			}
		})
		const vm = new Vue({
			el: "#expart",
			data() {
				return {

					treeData: [{
						id: 1,
						label: 'AAA项目',
						switch1: false,
						children: [{
								id: "1-1",
								label: 'AAA项目标段1',
								switch1: true
							},
							{
								id: 1 - 2,
								label: 'AAA项目标段2',
								switch1: false
							},
							{
								id: 1 - 3,
								label: 'AAA项目标段3',
								switch1: true,
							}
						]
					}],
					tableData: [


					]


				}

			},
			methods: {
				treeSwitch(e, f) {
					const bool = f.switch1
					const a = e => {
						let c = e.children
						if (c && c.length) {
							c.forEach(item => {
								a(item)
								item.switch1 = bool
							})
						}
					}

					a(f)

				},
				tagClick(e) {
					console.log(e)

				}

			}


		})
	</script>
</html>
